import React, { useState } from 'react';
import { Card, Button } from 'antd';
import { useSelector } from 'umi';
import ImgUpload from '../../components/ImgUpload';
import UpdateProfile from '../../components/profile/UpdateProfile';

export default function Profile() {
  const userInfo = useSelector((state) => state.user.loginInfo);
  const [visible, setVisible] = useState(false); //抽屉

  // console.log('userInfo', userInfo);
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div className="site-card-border-less-wrapper">
      <Card
        title="个人中心"
        extra={
          <Button type="primary" onClick={showDrawer}>
            修改资料
          </Button>
        }
        bordered={false}
        style={{ width: 1200 }}
      >
        <div style={{ display: 'flex' }}>
          <div style={{ width: '300px' }}>
            <img
              style={{ width: '100px', height: '100px' }}
              src={userInfo ? userInfo.user.avatar : ''}
              alt=""
            />
            <ImgUpload></ImgUpload>
          </div>
          {userInfo ? (
            <div>
              <p>账户:{userInfo.user.username}</p>
              <p>角色:{userInfo.user.roleName}</p>
              <p>性别:{userInfo.user.ssex == 0 ? '男' : '女'}</p>
              <p>电话:{userInfo.user.mobile}</p>
              <p>邮箱:{userInfo.user.email}</p>
              <p>部门:{userInfo.user.deptName}</p>
              <p>描述:{userInfo.user.description}</p>
            </div>
          ) : (
            ''
          )}
        </div>
        {visible ? (
          <UpdateProfile
            handleOk={handleOk}
            handleCancel={handleCancel}
            userInfo={userInfo}
            visible={visible}
            onClose={onClose}
          ></UpdateProfile>
        ) : null}
      </Card>
    </div>
  );
}
